<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台主界面</title>
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台主界面</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="layui/images/face/8.gif" class="layui-nav-img">
                    李狗蛋
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul id="menu" class="layui-nav layui-nav-tree"  lay-filter="menuFilter">
                <!--左侧导航栏，此处内容由下方script拼接而成-->
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab" lay-allowClose="true" lay-filter="myTabs">
                <ul class="layui-tab-title">
                    <li class="layui-this">欢迎页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">欢迎使用用户综合分析平台</div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script>
    //拼接左侧导航栏区域
    layui.use(['element','jquery'], function(){
        var element = layui.element;
        var $ = layui.jquery

        $.ajax({
            url:"menu/selectAllMenu",
            type:"get",
            // dataType:"json",
            success:function (data) {
                // console.log(data);
                var content = "";
                for(var i = 0 ; i< data.length ; i++){//一级菜单循环
                    var menu1 = data[i];//所有的一级菜单
                    content+="<li class=\"layui-nav-item layui-nav-itemed\">\n" +
                        "<a class=\"\" href=\"javascript:;\">"+menu1.menuName+"</a>\n" +
                        "<dl class=\"layui-nav-child\">";

                    var secondMenus = menu1.secondMenu;//每个一级菜单下的二级菜单
                    for(var j = 0 ; j< secondMenus.length ; j++){//二级菜单循环
                        var menu2 = secondMenus[j];
                        content+="<dd><a href=\"javascript:toAddTab("+menu2.id+",'"+menu2.menuName+"','"+menu2.href+"',"+")\">"+menu2.menuName+"</a></dd>";
                    }
                    content+="</dl></li>";
                }
                $("#menu").html(content);//将拼接的导航栏放入到ul标签内
                element.render("nav","menuFilter");//重新渲染导航栏
            }
        })
    });
    function toAddTab(id,menuName,href) {
        var element = layui.element;
        var $ = layui.jquery;
        if($("li[lay-id="+id+"]").length == 0){
            element.tabAdd('myTabs', {
                title: menuName
                ,content: "<iframe src=\""+href+"\" width='100%' height='500px'></iframe>"
                ,id: id
            });
        }
        else{
            element.tabDelete('myTabs',id);
            element.tabAdd('myTabs', {
                title: menuName
                ,content: "<iframe src=\""+href+"\" width='100%' height='500px'></iframe>"
                ,id: id
            });
        }
        element.tabChange("myTabs",id);
    }
</script>

</body>
</html>